<template>
  <div class="market-header clearfix">
    <div class="title">
      <icon-svg :name="asset.assetType === 1 ? 'iconTag' : 'iconAlbum'"></icon-svg>
      {{ asset.assetName }}
    </div>
    <img src="~@/assets/img/tag_disabled.png" class="disabled-sign" v-if="asset.tagStatus && asset.tagStatus === 70" />
    <div class="header-btns" :class="{ disabled: asset.tagStatus && asset.tagStatus === 70 }">
      <el-button type="text" class="watch" @click="toggleWatch" v-if="watch">
        <i :class="isWatch ? 'el-icon-star-on' : 'el-icon-star-off'"></i><br />
        <span class="text">{{ isWatch ? '取消关注' : '关注' }}</span>
      </el-button>
      <el-button type="text" class="album" @click="openDrawer('joinAlbum')" v-if="join">
        <icon-svg name="iconJoin"></icon-svg><br />
        <span class="text">加入专辑</span>
      </el-button>
      <el-button type="text" class="praise" @click="openDrawer('marketRate')" v-if="rate">
        <icon-svg name="iconEvaluate"></icon-svg><br />
        <span class="text">评价</span>
      </el-button>
      <el-button type="text" class="share" @click="openDrawer('albumShare')" v-if="share">
        <icon-svg name="iconShare"></icon-svg><br />
        <span class="text">分享</span>
      </el-button>
    </div>
    <join-album ref="joinAlbum" :assetId="asset.assetId"></join-album>
    <market-rate ref="marketRate" @refresh="refresh"></market-rate>
    <album-share ref="albumShare" :assetId="asset.assetId"></album-share>
  </div>
</template>

<script>
import joinAlbum from '../album/join-album-drawer'
import marketRate from './market-rate'
import albumShare from '../album/share-album-drawer'
export default {
  components: {
    joinAlbum,
    marketRate,
    albumShare
  },
  props: {
    asset: {
      type: Object,
      required: true,
      default: () => {
        return {
          assetName: '',
          assetId: ''
        }
      }
    },
    watch: {
      type: Boolean,
      default: false
    },
    join: {
      type: Boolean,
      default: false
    },
    rate: {
      type: Boolean,
      default: false
    },
    share: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isWatch: false
    }
  },
  created() {
    this.getWatch()
  },
  methods: {
    getWatch() {
      this.$ajax({
        url: this.$ajax.setUrl(`cac/cacAssetWatch/isWatch/${this.asset.assetId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.isWatch = data.data
        } else {
          // 失败后执行的操作
        }
      })
    },
    toggleWatch() {
      if (this.asset.tagStatus && this.asset.tagStatus === 70) return
      if (this.isWatch) this.cancelWatch()
      else this.addWatch()
    },
    addWatch() {
      this.$ajax({
        url: this.$ajax.setUrl(`cac/cacAssetWatch/addWatch/${this.asset.assetId}`),
        method: 'post',
        data: this.$ajax.setData()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$message.success(data.msg)
          this.getWatch()
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    cancelWatch() {
      this.$ajax({
        url: this.$ajax.setUrl(`cac/cacAssetWatch/cancelWatch/${this.asset.assetId}`),
        method: 'delete',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$message.success(data.msg)
          this.getWatch()
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    openDrawer(ref) {
      if (this.asset.tagStatus && this.asset.tagStatus === 70) return
      this.$refs[ref].showDrawer(this.asset.assetId)
    },
    refresh() {
      this.$emit('refresh')
    }
  }
}
</script>

<style lang="scss">
.market-header {
  position: relative;
  .title {
    font-size: 20px;
    font-weight: bold;
    padding-left: 15px;
    color: $theme-color;
    float: left;
    position: relative;
    &:before {
      width: 3px;
      content: '';
      background: $theme-color;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
    }
    svg {
      width: 25px;
      height: 25px;
      vertical-align: middle;
      margin-top: -4px;
    }
  }
  .disabled-sign {
    width: 100px;
    position: absolute;
    top: -10px;
    right: 280px;
  }
  .header-btns {
    float: right;
    margin-top: -25px;
    &.disabled {
      i,
      svg {
        color: #909399 !important;
      }
      .text {
        background-color: #909399 !important;
      }
    }
    .el-button {
      & + .el-button {
        margin-left: 20px;
      }
      .text {
        display: inline-block;
        padding: 3px 5px;
        margin-top: 5px;
        color: #fff;
      }
      &.watch {
        i {
          font-size: 25px;
          color: #fca438;
        }
        .text {
          background-color: #fca438;
        }
      }
      &.praise {
        svg {
          width: 25px;
          height: 25px;
          color: #88c0ef;
        }
        .text {
          background-color: #88c0ef;
        }
      }
      &.album {
        svg {
          width: 23px;
          height: 23px;
          color: #fab79a;
        }
        .text {
          background-color: #fab79a;
        }
      }
      &.share {
        svg {
          width: 23px;
          height: 23px;
          color: #8e99cf;
        }
        .text {
          background-color: #8e99cf;
        }
      }
    }
  }
}
</style>
